<template>
  <div class="user">
    <van-nav-bar style="background-color: #f4f4f4" left-arrow>
      <template #left>
        <van-icon class-prefix="iconfont" name="daohanglan" size="18"/>
      </template>
      <template #right>
        <van-icon name="search" size="25px" color="#000" @click="$router.push('search')"/>
      </template>
    </van-nav-bar>
    <!--  用户信息栏  -->
    <div class="userInformation">
      <div><img :src="userAccount.avatarUrl"
                style="width: 80px;height: 80px;border-radius: 50%;">
      </div>
      <div style="margin-top: 10px">
        <span style="font-size: 16px;font-weight: 700">{{ userAccount.nickname }}</span>
        <span
          style="background-color: #cccccc;padding: 2px;border-radius: 5px;font-size: 10px;color: #fff"
          :style="userAccount.vipType!==0?{background:'#fb3939'}:{background: '#ccc'}">VIP开通</span>
      </div>
      <div style="margin-top: 10px;font-size: 16px;font-weight: 400;">
        <span style="margin-right: 20px">{{ userAccount.follows }}关注</span>
        <span style="margin-right: 20px">{{ userAccount.followeds }}粉丝</span>
        <span style="margin-right:0px">Lv.1</span>
      </div>
    </div>
    <!--  宫格导航栏  -->
    <div class="palaceNavigation">
      <van-grid style="color:#ff4149;border-radius: 15px" :clickable="true" icon-size="26px" :border="false">
        <van-grid-item icon-prefix="iconfont" icon="zuijinbofang" text="最近播放"/>
        <van-grid-item icon-prefix="iconfont" icon="shoucang" text="收藏和赞"/>
        <van-grid-item icon-prefix="iconfont" icon="yunyunpan" text="云盘"/>
        <van-grid-item icon-prefix="iconfont" icon="ziyuan20" text="播客"/>
        <van-grid-item icon-prefix="iconfont" icon="diantai" text="电台"/>
        <van-grid-item icon-prefix="iconfont" icon="music_playlist" text="音乐人"/>
        <van-grid-item icon-prefix="iconfont" icon="quxianshangsheng" text="曲风"/>
        <van-grid-item icon-prefix="iconfont" icon="bei" text="云贝"/>
      </van-grid>
    </div>
    <!--  歌单  -->
    <van-tabs v-model="active" style="background-color: #f6f6f6" background="#f6f6f6">
      <van-tab title="创建歌单">
        <div class="playList">
          <van-cell title="创建歌单">
            <template #right-icon>
              <van-icon name="plus" size="18px" @click="createShow = true" style="margin-right: 15px;margin-top: 3px"/>
              <van-icon name="sangediandian" @click="playShow=true" class-prefix="iconfont"/>
            </template>
          </van-cell>
          <div v-for="(item,index) in playList" :key="index" v-if="item.subscribed==false">
            <van-row style="margin-top: 10px">
              <van-col span="4" style="text-align: center;margin-left: 5px ;">
                <img :src="item.coverImgUrl" style="width: 50px;height: 50px;border-radius: 5px">
              </van-col>
              <van-col span="17" style="line-height: 25px">
                <div>{{ item.name }}</div>
                <div style="font-size: 12px;font-weight: 400">
                  <span>{{ item.trackCount }}首</span>
                </div>
              </van-col>
              <van-col span="1" style="margin-left: 8px;line-height: 50px">
                <van-icon name="sangediandian" @click="collectionPersonShows(item)" class-prefix="iconfont"/>
              </van-col>
            </van-row>
          </div>
        </div>
      </van-tab>
      <van-tab title="收藏歌单">
        <div class="playList">
          <van-cell title="收藏歌单">
            <template #right-icon>
              <van-icon name="sangediandian" @click="collectionShow=true" class-prefix="iconfont"/>
            </template>
          </van-cell>
          <div v-for="(item,index) in playList" :key="index" v-if="item.subscribed!=false">
            <van-row style="margin-top: 10px">
              <van-col span="4" style="text-align: center;margin-left: 5px ;">
                <img :src="item.coverImgUrl" style="width: 50px;height: 50px;border-radius: 5px">
              </van-col>
              <van-col span="17" style="line-height: 25px">
                <div>{{ item.name }}</div>
                <div style="font-size: 12px;font-weight: 400">
                  <span>{{ item.trackCount }}首,by</span>
                  <span>{{ item.creator.nickname }}</span>
                </div>
              </van-col>
              <van-col span="1" style="margin-left: 8px;line-height: 50px">
                <van-icon @click="shouchangShows(item)" name="sangediandian" class-prefix="iconfont"/>
              </van-col>
            </van-row>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <!--  新增歌单页面  -->
    <van-popup v-model="createShow" close-icon-position="top-left" round position="bottom"
               :style="{ height: '40%' }">
      <van-cell>
        <template #title>
          <span @click="createShow=false" style="font-weight: 500">取消</span>
        </template>
        <template #right-icon>
          <span style="font-weight: 300" @click="createPlayList">完成</span>
        </template>
      </van-cell>
      <van-tabs @click="playListType">
        <van-tab title="音乐歌单">
          <van-field v-model="createName" placeholder="输入新建歌单标题" maxlength="40" show-word-limit/>
          <div style="font-size: 12px;font-weight: 400">
            <van-checkbox style="margin-top: 5px;margin-left: 10px;" v-model="shared" checked-color="#ee0a24">
              设置为共享歌单(和好友一起管理)
              <van-tag plain type="danger">限免</van-tag>
            </van-checkbox>
            <van-checkbox style="margin-top: 10px;margin-left: 10px;" v-model="privacy" checked-color="#ee0a24">
              设置为隐私歌单
            </van-checkbox>
          </div>
        </van-tab>
        <van-tab title="视频歌单">
          <van-field v-model="createName" placeholder="输入新建歌单标题" maxlength="40" show-word-limit/>
          <div style="font-size: 12px;font-weight: 400">
            <van-checkbox style="margin-top: 5px;margin-left: 10px;" v-model="privacy" checked-color="#ee0a24">
              设置为隐私歌单
            </van-checkbox>
          </div>
        </van-tab>
      </van-tabs>
    </van-popup>
    <!--  管理歌单  -->
    <van-popup v-model="playShow" close-icon-position="top-left" round position="bottom"
               :style="{ height: '30%' }">
      <van-cell>
        <template #title>
          <span style="font-weight: 500">我创建的歌单</span>
        </template>
      </van-cell>
      <van-cell>
        <template #title>
          <div @click="playShow=false, createShow=true">
            <van-icon name="chuangjian" class-prefix="iconfont"/>
            <span style="margin-left: 10px">创建新歌单</span>
          </div>
        </template>
      </van-cell>
      <van-cell>
        <template #title>
          <div @click="playlistManagement">
            <van-icon name="shebeiguanli" class-prefix="iconfont"/>
            <span style="margin-left: 10px">歌单管理</span>
          </div>
        </template>
      </van-cell>
    </van-popup>
    <!--  收藏歌单管理  -->
    <van-popup v-model="collectionShow" close-icon-position="top-left" round position="bottom"
               :style="{ height: '30%' }">
      <van-cell>
        <template #title>
          <span style="font-weight: 500">我收藏的歌单</span>
        </template>
      </van-cell>
      <van-cell>
        <template #title>
          <div @click="playlistManagement">
            <van-icon name="shebeiguanli" class-prefix="iconfont"/>
            <span style="margin-left: 10px">歌单管理</span>
          </div>
        </template>
      </van-cell>
    </van-popup>
    <!--  歌单条目  -->
    <van-popup v-model="collectionPersonShow" close-icon-position="top-left" round position="bottom"
               :style="{ height: '30%' }">
      <van-cell>
        <template #title>
          <span style="font-weight: 500">歌单：{{ personal.name }}</span>
        </template>
      </van-cell>
      <van-cell>
        <template #title>
          <div @click="$router.push('/delPlayList')">
            <van-icon name="fenxiang" class-prefix="iconfont"/>
            <span style="margin-left: 10px">分享</span>
          </div>
        </template>
      </van-cell>
      <van-cell>
        <template #title>
          <div @click="updatePlayList">
            <van-icon name="bianji" class-prefix="iconfont"/>
            <span style="margin-left: 10px">编辑歌曲信息</span>
          </div>
        </template>
      </van-cell>
      <van-cell>
        <template #title>
          <div @click="delPlayList">
            <van-icon name="shanchu2" class-prefix="iconfont"/>
            <span style="margin-left: 10px">删除</span>
          </div>
        </template>
      </van-cell>
    </van-popup>
    <!--  收藏  -->
    <van-popup v-model="shouchangShow" close-icon-position="top-left" round position="bottom"
               :style="{ height: '30%' }">
      <van-cell>
        <template #title>
          <span style="font-weight: 500">歌单：{{ personal.name }}</span>
        </template>
      </van-cell>
      <van-cell>
        <template #title>
          <div @click="$router.push('/delPlayList')">
            <van-icon name="fenxiang" class-prefix="iconfont"/>
            <span style="margin-left: 10px">分享</span>
          </div>
        </template>
      </van-cell>
      <van-cell>
        <template #title>
          <div @click="delPlayList">
            <van-icon name="shanchu2" class-prefix="iconfont"/>
            <span style="margin-left: 10px">删除</span>
          </div>
        </template>
      </van-cell>
    </van-popup>

  </div>
</template>

<script>
import {getUserAccount, getUserCommentHistory, getUserDetail, getUserPlaylist, getUserSubcount} from "../api/user";
import {getLoginStatus} from "../api/login";
import {delPlayList, getPlayListCreate} from "../api/playlist";
import Login from "./login/login.vue";

export default {
  name: "user",
  data() {
    return {
      uid: '',//用户id
      userAccount: {},//账号信息
      playList: [],//歌单信息
      active: 0,
      createShow: false,//新增弹窗
      privacy: false,//隐私歌单
      shared: false,//共享歌单
      createName: '',//新建歌单名称
      createType: 'NORMAL',//歌单类型
      playShow: false,//歌单管理页面
      collectionShow: false,//收藏歌单页面管理
      collectionPersonShow: false,//单条管理
      delId: '',//要删除的id
      personal: {},
      shouchangShow: false
    }
  },
  created() {
    // 登录状态
    this.getLoginStatus()
  },
  methods: {
    getUserDetail() {

    },
    // 登录状态
    getLoginStatus() {
      let self = this
      getLoginStatus().then(res => {
        self.uid = res.data.data.account.id
        // 获取用户详细情况
        getUserDetail(self.uid).then(res => {
          this.userAccount = res.data.profile
        })
        //  获取用户歌单
        getUserPlaylist(self.uid).then(res => {
          self.playList = res.data.playlist
        })
      })
    },
    // 获取账号信息
    getUserAccount() {
      getUserAccount().then(res => {
        this.userAccount = res.data.profile
      })
    },
    //湖区用户信息，歌单，收藏，mv,dj,数量
    getUserSubcount() {
      let self = this
      console.log(self.uid)
    },
    // 新建歌单
    createPlayList() {
      // this.createShow = true
      let privacy = ''//设置为隐私清单
      if (this.privacy === true) {
        privacy = '10'
      }
      if (this.shared === true) {
        this.createType = 'SHARED'
      }
      getPlayListCreate(this.createName, privacy, this.createType).then(res => {
        console.log(res)
        this.createShow = false
      })
    },
    //歌单类型
    playListType(name, title) {
      let self = this
      if (title === '音乐歌单') {
        // 默认为音乐
        self.createName = self.createName.trim()
        self.createType = 'NORMAL'
      } else {
        self.createName = self.createName.trim()
        self.createType = 'VIDEO'
      }
    },
    // 将要操作的歌单信息
    collectionPersonShows(item) {
      this.personal = item
      this.collectionPersonShow = true
    },
    shouchangShows(item) {
      this.personal = item
      this.shouchangShow = true
    },
    //   进行删除歌单
    delPlayList() {
      let self = this
      this.$dialog.confirm({
        title: '警告',
        message: '是否要删除  ' + this.personal.name + '  这个歌单',
      })
        .then(() => {
          delPlayList(self.personal.id).then(res => {
            console.log(res)
            if (res.data.code === 200) {
              this.$toast.success('删除成功');
              self.collectionPersonShow = false
              self.shouchangShow = false
            }
          })
        })
        .catch(() => {
          // on cancel
          self.collectionPersonShow = false
          self.shouchangShow = false
        });
    },


    // 2023-3-30日以下未完成


    //   编辑歌曲信息
    updatePlayList() {
      this.$router.push({
        name: 'updatePlayList', query: {
          id: this.personal.id,
          name: this.personal.name,
          tags: this.personal.tags,
          desc: this.playList.description,
          images: this.playList.coverImgUrl
        }

      })
    },
    //   歌单管理——创建歌单页面
    playlistManagement() {
      this.playShow = false
      let id = JSON.stringify(this.playList)
      this.$router.push({name: "delPlayList", query: {playList: id}})
    }
  }
}
</script>

<style scoped lang="scss">
.user {
  background-color: #f4f4f4;
  margin-bottom: 85px;

  .userInformation {
    text-align: center;
    background-color: #ffffff;
    border-radius: 15px;
    margin: 10px 10px 0;
    height: 150px;
  }

  .palaceNavigation {
    margin: 10px 10px 0;
    background-color: #ffffff;
    border-radius: 15px;
  }

  .playList {
    margin: 10px 10px 0;
    background-color: #ffffff;
    height: 100%;
  }
}
</style>
